<template>
    <div class="page"> 
        <div class="main">
            <group gutter='0' label-width="100px">
                <x-textarea v-model="formAdd.name" :height="20" :rows='1' placeholder="请输入客户姓名" :autosize="true">
                    <div slot="label" style="width: 100px;"><span style="color: red;">* </span>客户姓名</div>
                </x-textarea>
                <x-textarea v-model="formAdd.phone" :height="20" :rows='1' placeholder="请输入联系电话" :autosize="true">
                    <div slot="label" style="width: 100px;"><span style="color: red;">* </span>联系电话</div>
                </x-textarea>
                <x-textarea v-model="formAdd.kdzh" :height="20" :rows='1' placeholder="请输入宽带账号" :autosize="true">
                    <div slot="label" style="width: 100px;"><span style="color: red;">* </span>宽带账号</div>
                </x-textarea>
                <x-textarea v-model="formAdd.handler" :height="20" :rows='1' placeholder="请输入处理人" :autosize="true">
                    <div slot="label" style="width: 100px;"><span style="color: red;">* </span>处理人</div>
                </x-textarea>
                
                    <datetime v-model="formAdd.ghrq" format="YYYY-MM-DD HH:mm" title="请输入更换日期" @on-change="change"></datetime>
               
                <x-textarea v-model="formAdd.jdsjdh" :height="20" :rows='1' placeholder="请输入旧电视机顶盒(MAC码)" :autosize="true">
                    <div slot="label" style="width: 100px;"><span style="color: red;"> </span>旧电视机顶盒(MAC码)</div>
                </x-textarea>
                <x-textarea v-model="formAdd.xdsjdh" :height="20" :rows='1' placeholder="请输入新电视机顶盒(MAC码)" :autosize="true">
                    <div slot="label" style="width: 100px;"><span style="color: red;"> </span>新电视机顶盒(MAC码)</div>
                </x-textarea>
                <x-textarea v-model="formAdd.jgmjdh" :height="20" :rows='1' placeholder="请输入旧光猫机顶盒(SN码)" :autosize="true">
                    <div slot="label" style="width: 100px;"><span style="color: red;"> </span>旧光猫机顶盒(SN码)</div>
                </x-textarea>
                <x-textarea v-model="formAdd.xgmjdh" :height="20" :rows='1' placeholder="请输入新光猫机顶盒(SN码)" :autosize="true">
                    <div slot="label" style="width: 100px;"><span style="color: red;"> </span>新光猫机顶盒(SN码)</div>
                </x-textarea>
                <x-textarea v-model="formAdd.remark" :height="20" :rows='3' :autosize="true" placeholder="备注"></x-textarea>
            </group>
        </div>
        <div class="footer">
            <a class="active" @click="save">提交</a>
        </div>
    </div>
</template>

<script>
    import { XHeader, Actionsheet, TransferDom, ButtonTab, ButtonTabItem, ChinaAddressData } from 'vux'
    import { Divider } from 'vux'
    import { Tab, TabItem, Sticky, XButton } from 'vux'
    import { Card } from 'vux'
    import { PopupPicker } from 'vux'
    import { XInput, Group, XAddress, XTextarea, Selector, Datetime, Search, Popup, Cell, Swiper, SwiperItem } from 'vux'
    import { setTimeout } from 'timers';
    export default {
        components: {
            XHeader,
            Actionsheet,
            ButtonTab,
            ButtonTabItem,
            Divider,
            Tab,
            TabItem,
            Sticky,
            Divider,
            XButton,
            Card,
            PopupPicker,
            XInput,
            Group,
            XAddress,
            XTextarea,
            Selector,
            Datetime,
            Search,
            Popup,
            Cell,
            Swiper,
            SwiperItem,
        },  
        data () {
            return {
                formAdd: {},
                limitHourValue:''
            }
        },
        activated(){
            
        },
        methods: {
        /************************************添加****************************** */
            save(){
                if(!this.formAdd.name){
                    this.toastFail("请输入客户姓名", "160px")
                    return;
                }
                if(!this.formAdd.phone){
                    this.toastFail("请输入联系电话", "160px")
                    return;
                }
                if(!this.formAdd.kdzh){
                    this.toastFail("请输入宽带账号", "160px")
                    return;
                }
                if(!this.formAdd.handler){
                    this.toastFail("请输入处理人", "160px")
                    return;
                }
                this.$vux.loading.show()
                this.$post("/anapp/WxGzddController/addOne", this.formAdd, (data) => {
                    this.$vux.alert.show({
                        title: '提示',
                        content: '报故障成功，我们会尽快联系您~',
                        onShow () {},
                        onHide () {}
                    })
                    // this.goBack()
                })
            },
            change (value) {
      console.log('change', value)
    },
        },
    }
</script>

<style lang="less" scoped>
    @baseColor: #1aad19;
    .empty-box{
        height: 12px;
        background: #f2f2f2;
    }
    
    .main{
        padding-bottom: 55px;
        font-size: 12px;
        background: #f2f2f2;
        .weui-cell, .vux-cell-box{
            font-size: 14px;
            &:before{
                left: 0;
            }
        }
    }
    .footer{
        position: absolute;
        bottom: 0;
        z-index: 2;
        width: 100%;
        height: 44px;
        line-height: 44px;
        text-align: center;
        background: #fff;
        display: flex;
        color: @baseColor;
        border-top: 1px solid @baseColor;
        a{
            flex: 1;
            &.active{
                color: #fff;    
                background: @baseColor;
            }
        }
    }
</style>